<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            list-style-type: none;
        }
        .A{
            width: 600px;
            height: 600px;
            margin: auto;
            background: black;
        }
        .a{
            width: 600px;
            height: 550px;
            background: red;
        }
        .b{
            width: 600px;
            height:550px;
            margin: auto;
            display: none;
            background: blue;
        }
        .c{
            width: 600px;
            height: 550px;
            margin: auto;
            display:none;
            background:gray;
        }
        .d{
            width: 600px;
            height: 550px;
            margin: auto;
            display: none;
            background: palevioletred;
        }
        .v1,.v2,.v3,.v4{
            background: green;
            border: none;
            width: 147px;
            height: 50px;
        }

    </style>
</head>
<body>
    <div class="A" id="A">
    <div class="a" id="a"></div>
    <div class="b" id="b"></div>
    <div class="c" id="c"></div>
    <div class="d" id="d"></div>
    <button class="v1" id="btn1">1</button>
    <button class="v2" id="btn2">2</button>
    <button class="v3" id="btn3">3</button>
    <button class="v4" id="btn4">4</button>
    <script>
        var a=document.getElementById('btn1');
        var b=document.getElementById('btn2');
        var c=document.getElementById('btn3');
        var d=document.getElementById('btn4');
        var A=document.getElementById('A');
        var aa=document.getElementById('a');
        var bb=document.getElementById('b');
        var cc=document.getElementById('c');
        var dd=document.getElementById('d');
        a.onclick=function(){
            aa.style.display="none";
            bb.style.display="block";
        }
        b.onclick=function(){
            bb.style.display="none";
            cc.style.display="block";
        }
        c.onclick=function(){
            cc.style.display="none";
            dd.style.display="block";
        }
        d.onclick=function(){
            dd.style.display="none";
            cc.style.display="none";
            bb.style.display="none";
            aa.style.display="none";
        }
    </script>
</div>
</body>
</html>